@extends('home.layout.base')
@section('styles')
    <link href="{{ asset('css/index.css') }}" rel="stylesheet">
@endsection
@section('scripts')
    <script src="{{ asset('js/vue.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/moment.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/index.js') }}" type="text/javascript"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: function() {
                return {
                    form: {
                        truename: '',
                        card: '',
                        mobile: "{{ auth()->user()->username }}",
                        material: '',
                        protocol: true,
                        _token:"{{csrf_token()}}"
                    },
                }
            },
            methods: {
                update() {
                    let that = this;
                    let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
                    if(!reg.test(this.form.card)){
                        this.$refs.form.fields[2].error = "请输入有效的身份证号码";return false;
                    }
                    if(this.form.protocol === false){
                        this.$refs.form.fields[4].error = "请阅读并同意《免责申明》";return false;
                    }
                    this.$refs['form'].validate((valid) => {
                        if (valid) {
                            $.post("{{ route('user.index.join') }}",this.form,function(res){
                                if(res.code){
                                    that.$message.error(res.msg);
                                }else{
                                    that.$message({
                                        message: '专栏申请提交成功',
                                        type: 'success'
                                    });
                                    setTimeout(function(){
                                        window.location.href = "{{ route('user.index.join') }}";
                                    }, 1000);
                                }
                            });
                        }
                    });
                },
                uploadFileBefore(file) {
                    const isLt2M = file.size / 1024 / 1024 < 2;
                    if (!isLt2M) {
                        this.$message.error('文件大小不能超过 2M!');
                    }
                    return isLt2M;
                },
                uploadFileSuccess(res, file) {
                    this.form.material = res.data.path;
                },
            }
        });
    </script>
@endsection
@section('content')
    <div class="container main join">
        <div class="row">
            <div class="col-lg-12  join-title">
                <p class="col-lg-offset-3">寻找最前沿的思想、开启区块链未来的大师</p>
            </div>
        </div>
    </div>
    <div class="container main">
        <div class="row">
            <div class="col-lg-12" id="app" v-cloak>
                <div class="col-lg-12 join-info">
                    @if(auth()->user()->column > 0)
                        <div class="col-lg-2"></div>
                        <div class="col-lg-8 text-center" style="min-height: 350px;line-height: 350px">
                            @if(auth()->user()->column == 1)
                                <p style="font-size: 20px">您已提交专栏申请，请等待系统审核...... </p>
                            @endif
                            @if(auth()->user()->column == 2)
                                <p style="font-size: 20px">您已经是专栏作者，点击前往 <a style="font-size: 22px;color: #13afe0;" href="{{ route('user.index.index') }}">个人中心</a></p>
                            @endif
                        </div>
                        <div class="col-lg-2"></div>
                    @else
                        <div class="col-lg-2"></div>
                        <div class="col-lg-8">
                            <h3> 申请专栏</h3>
                            <el-form :model="form" ref="form" status-icon label-position="top" class="login-form">
                                <el-form-item label="手机号：" :rules="[{ required: true, message: '请填写手机号', trigger: 'blur'}]" prop="mobile">
                                    <el-input v-model="form.mobile"   placeholder="请填写手机号" auto-complete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="姓名：" :rules="[{ required: true, message: '请填写真实姓名', trigger: 'blur'}]" prop="truename">
                                    <el-input v-model="form.truename"  placeholder="请填写真实姓名" auto-complete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="身份证：" :rules="[{ required: true, message: '请填写身份证号码', trigger: 'blur'}]" prop="card">
                                    <el-input v-model="form.card"  placeholder="请填写身份证号码" auto-complete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="投稿材料：" :rules="[{ required: true, message: '请上传投稿材料', trigger: 'change'}]" prop="material">
                                    <el-upload
                                            class="upload-demo"
                                            name="file"
                                            action="{{ $setting['file_upload'] }}"
                                            :limit="1"
                                            :before-upload="uploadFileBefore"
                                            :on-success="uploadFileSuccess">
                                        <el-button size="small" type="primary">点击上传</el-button>
                                    </el-upload>
                                </el-form-item>
                                <el-form-item class="protocol" prop="protocol">
                                    <el-checkbox v-model="form.protocol">我已阅读并同意</el-checkbox><a target="_blank" href="{{ route('home.index.about',['id'=>1]) }}">《免责申明》</a>
                                </el-form-item>
                                <div class="form-submit text-center">
                                    <el-button type="primary" style="width: 150px" @click="update()">提交资料</el-button>
                                </div>
                            </el-form>
                        </div>
                        <div class="col-lg-2"></div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection

